<template>
  <div class="mod-config">
    <el-divider content-position="left">查询条件</el-divider>
    <el-form label-width="80px">
      <el-form-item label="查询分类">
        <el-radio-group v-model="spreadData.classify">
          <el-radio label="1">品种</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="查询日期">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.beginTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align: center;">至</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.endTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品类别">
            <el-select v-model="dataForm.ctgId" clearable  @change="changeCtgId">
              <el-option v-for="item in ctgOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="制造商">
            <el-input v-model="dataForm.supplyName" placeholder="请选择">
              <el-button slot="append" @click="chooseSupply">选择</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品品种" prop="brandName">
            <el-input v-model="dataForm.brandName" readonly="readonly">
              <el-button slot="append" @click="getBrandList">选择</el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="21">
          <el-form-item label="查询部门">
            <el-input style="width: 175px;" v-model="spreadData.deptName" disabled></el-input>
            <el-input type="textarea" v-model="spreadData.deptName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0">
            <el-button @click="openDeptDialog">选择</el-button>
          </el-form-item>
        </el-col>
      </el-row>
        <el-form-item label-width="5px">
          <el-link :href="printUrl" target="_blank" type="primary"><el-button type="primary" @click="getWorkParams">查 询</el-button></el-link>
        </el-form-item>
    </el-form>
    <search-dept v-if="deptVisible" ref="deptDialog" @refreshData="getDeptData"></search-dept>
    <supply-search v-if="supplyVisible" ref="supplySearch" @refreshData="updateSearchForm"></supply-search>
    <select-brand v-if="selectBrandVisible" ref="selectBrand" @refreshData="updateFormBrand"></select-brand>
  </div>
</template>

<script>
  let params = '/work/saleCollectOptometry.cpt'
  import { filterParams } from '@/util/tools'
  import { getDateFormat } from '@/util/tools'
  import { mapGetters } from 'Vuex'
  import { unitList } from '@/api/admin/unit'
  import { getCtgDataList } from "@/api/eims/check";
  import SupplySearch from '@/components/business/SearchSupply'
  import SelectBrand from '../storage/SearchBrand'
  import SearchDept from '@/components/business/SearchDept'
  export default {
      data () {
        return {
          printUrl: '',
          companyOption: [],
          deptVisible: false,
          spreadData: {
            classify: '1',
            unitId: '',
            deptName: '',
            fxjd: '2',
            fztj: '1',

            billType: '1',
            iscontain: '1',
            ShowType: '1',
            isSalesPrice: '1',
            bgnzk: '',
            endzk: '',
            issetmeal: '',
            setmealName: '',
            setmealType: '',
            ordersTypeFlag: [1,2,3,4,5],
            ctgId: '0',
            goodsId: '',
            goodsName: '',
            jsyhkFlag: '1',
            isTongJi: '1',
            condition: '1'
          },
          dataForm: {
            deptId: '',
            deptIds: [],
            beginTime: '',
            endTime: '',
            billId: '',
            startPrice: '',
            endPrice: '',
            startDiscountPrice: '',
            endDiscountPrice: '',
            customerCard: '',
            customerName: '',
            customerPhone1: '',
            salerUserId: '',
            payerUserId: '',
            supplyId: '',
            supplyName: '',
            brandName: '',
            brandId: ''
          },
          ctgOptions: [],
          supplyVisible: false,
          selectBrandVisible: false,
        };
      },
      computed: {
        ...mapGetters(['userInfo','bizData'])
      },
      components: {
        SearchDept,
        SupplySearch,
        SelectBrand
      },
      created() {
        this.dataForm.beginTime = getDateFormat(new Date())
        this.dataForm.endTime = getDateFormat(new Date())
        this.getCtgList()
        this.getCompanyList()
        this.spreadData.unitId = this.userInfo.unitId
        // this.spreadData.deptId = [this.userInfo.lessDeptId]
        // this.spreadData.deptName = this.userInfo.lessDeptName
      },
      methods:{
        //  查询公司列表
        getCompanyList() {
          unitList().then(response => {
            if(response.data.code == '0'){
              this.companyOption = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
        },
        //  打开查询部门弹窗
        openDeptDialog() {
          this.deptVisible = true
          this.$nextTick(() => {
            this.$refs.deptDialog.init()
          })
        },
        //  获取选择部门数据
        getDeptData(data) {
          let ids = []
          let names = []
          if(data.length){
            data.forEach(item => {
              ids.push(item.id)
              names.push(item.name)
            })
          }
          this.spreadData.deptName = names.join(',')
          this.dataForm.deptIds = ids
        },
        getWorkParams() {
          if(this.spreadData.classify == '1'){
            params = '/work/saleCollectOptometry.cpt'
          }
          let data = filterParams(this.dataForm)
          let parameter = ''
          for(let key in data){
            parameter += '&' + key + '=' + this.dataForm[key]
          }
          //let parameter = '&deptId='+this.dataForm.deptId + '&beginTime='+this.dataForm.beginTime+ '&endTime='+this.dataForm.endTime
          this.printUrl = this.bizData.printUrl + params + parameter
        },
        getCtgList() {
          getCtgDataList().then(response => {
            if(response.data.code == '0'){
              this.ctgOptions = response.data.data.records
            }else{
              this.$message.error(response.data.msg)
            }
          })
        },
        changeCtgId(){
          this.dataForm.supplyId = ''
          this.dataForm.supplyName = ''
          this.dataForm.brandId = ''
          this.dataForm.brandName= ''
        },
        //获取制造商列表
        chooseSupply() {
          let data = {
            ctgId: this.dataForm.ctgId
          }
          this.supplyVisible = true
          this.$nextTick(() => {
            this.$refs.supplySearch.init(data)
          })
        },
        updateSearchForm(data) {
          this.dataForm.supplyId = data.id
          this.dataForm.supplyName = data.name
          this.dataForm.brandId = ''
          this.dataForm.brandName= ''
        },
        // 获取商品品种信息
        getBrandList() {
          let data = {
            ctgId: this.dataForm.ctgId,
            supplyId: this.dataForm.supplyId
          }
          this.selectBrandVisible = true
          this.$nextTick(() => {
            this.$refs.selectBrand.init(data)
          })
        },
        //  更新表单品种信息
        updateFormBrand(data) {
          this.dataForm.brandId = data.id
          this.dataForm.brandName = data.name
          this.dataForm.brandCode = data.code
          this.dataForm.name = data.name
          this.dataForm.unitType = data.unitType
        }
      }
    }
</script>

<style lang="scss" scoped>
  .bg-row {
    background-color: #9ec0b0;
    // padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    margin-bottom: 2px;
  }
</style>
